<script setup>
import {
  Edit,
  Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue'

//宿舍分类数据模型
const categorys = ref([
  {
    "id": 1,
    "categoryName": "置业大厦",
    "categoryPrice": "4800",
    "createTime": "2024-07-31 00:50:45",
    "updateTime": "2024-07-31 01:04:00"
  },
  {
    "id": 2,
    "categoryName": "双创四人间",
    "categoryPrice": "3800",
    "createTime": "2024-07-31 14:20:10",
    "updateTime": "2024-07-31 14:20:10"
  },
  {
    "id": 4,
    "categoryName": "双创双人间",
    "categoryPrice": "8000",
    "createTime": "2024-07-31 22:37:48",
    "updateTime": "2024-07-31 22:37:48"
  },
  {
    "id": 5,
    "categoryName": "71四人间",
    "categoryPrice": "3800",
    "createTime": "2024-07-31 22:39:46",
    "updateTime": "2024-07-31 22:39:46"
  },
  {
    "id": 6,
    "categoryName": "101四人间",
    "categoryPrice": "4500",
    "createTime": "2024-08-01 14:41:40",
    "updateTime": "2024-08-01 14:41:40"
  }
])

//用户搜索时选中的分类id
const categoryId = ref('')

//宿舍列表数据模型
const dormitory = ref([
  {
    "id": 1,
    "dormitoryId": "801",
    "categoryId": 2,
    "createUser": 1,
    "createTime": "2024-07-31 14:44:19",
    "updateTime": "2024-07-31 14:50:22"
  }
])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数

//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
  dormitoryList();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
  dormitoryList();
}

//宿舍分类数据回显
import { dormitoryCategoryListService } from '@/api/Dormitory.js'
const dormitoryCategory = async () => {
  let result = await dormitoryCategoryListService()
  console.log(result);
  categorys.value = result.data;
}
dormitoryCategory();

//宿舍列表接口调用
import { dormitoryListService } from '@/api/Dormitory.js'
const dormitoryList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  // 如果有选中的categoryId，则作为查询参数传入
  if (categoryId.value) {
    params.categoryId = categoryId.value;
  }
  console.log('宿舍列表执行了')
  let result = await dormitoryListService(params);
  dormitory.value = result.data.items;
  for (let i = 0; i < dormitory.value.length; i++) {
    let d = dormitory.value[i];
    for (let j = 0; j < categorys.value.length; j++) {
      if (d.categoryId == categorys.value[j].id) {
        d.categoryName = categorys.value[j].categoryName;
      }
    }
  }
  total.value = result.data.total;
}
dormitoryCategory();
dormitoryList();

import { Plus } from '@element-plus/icons-vue'
//控制抽屉是否显示
const visibleDrawer = ref(false)
//添加表单数据模型
const dormitoryModel = ref({
  dormitoryId: '',
  categoryId: '',
})

//添加宿舍
import { dormitoryAddService } from '@/api/Dormitory.js'
import { ElMessage } from 'element-plus'
const addDormitory = async () => {
  let result = await dormitoryAddService(dormitoryModel.value);
  ElMessage.success(result.message ? result.message : '添加成功');
  dormitoryList()
  visibleDrawer.value = false
}

const title = ref('')

//修改宿舍展示表单
const updateShow = (row) => {
  title.value = '修改宿舍信息'
  visibleDrawer.value = true
  dormitoryModel.value = row
}

import { updateDormitoryService, deleteDormitoryService } from '@/api/Dormitory.js'
//修改宿舍调用接口
const updateDormitory = async () => {
  let result = await updateDormitoryService(dormitoryModel.value)
  ElMessage.success(result.message ? result.message : '修改成功')
  visibleDrawer.value = false
  dormitoryList();
}

//删除宿舍调用接口
import { ElMessageBox } from 'element-plus'
const deleteDormitory = (row) => {
  //提示用户，确认框
  ElMessageBox.confirm(
    '你确认要删除这条宿舍信息吗？',
    '温馨提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      //调用接口
      let result = await deleteDormitoryService(row.id)

      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      //刷新列表
      dormitoryList()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '删除取消',
      })
    })
}
import { useRouter } from 'vue-router'
const router = useRouter();
import {listFindByIdService} from '@/api/Dormitory.js'
import {dormitoryInfoStore} from '@/stores/dormitory.js'
const dormitoryStore = dormitoryInfoStore();
import {categoryNameStore} from '@/stores/categoryName.js'
const categoryName = categoryNameStore();
const jump = async(row)=>{
  let result = await listFindByIdService(row.id);
  dormitoryStore.setInfo(result.data.dormitoryId);
  categoryName.setInfo(row.categoryName);
  // let result1 = await findCategoryNameService(row.id);
  // categoryName.setInfo(result1.data);
  router.push('/show/dormitory/stu')
}


// //根据宿舍id和宿舍名查询宿舍中有哪些学生
// //查询数据
// const dormitoryPeo = ref({
//   dormitoryId:'',
//   categoryName:''

// })
// import {findPeoService} from '@/api/Dormitory.js'
// const findPeo = async(row)=>{
//   dormitoryPeo.dormitoryId = row.dormitoryId;
//   dormitoryPeo.categoryName = row.categoryName;
//   let result = await findPeoService(dormitoryPeo);
//   //TODO
//   //显示result
//   console.log(result.data);
// }

</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>宿舍管理</span>
        <div class="extra">
          <el-button type="primary" @click="visibleDrawer = true; title = '添加宿舍'">添加宿舍</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="宿舍分类：">
        <el-select placeholder="请选择" v-model="categoryId" style="width: 200px">
          <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="dormitoryList()">搜索</el-button>
        <el-button @click="categoryId = ''">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 宿舍列表 -->
    <el-table :data="dormitory" style="width: 100%">
      <el-table-column label="宿舍ID" prop="id"></el-table-column>
      <el-table-column label="宿舍编号" prop="dormitoryId"></el-table-column>
      <el-table-column label="分类名称" width="200" prop="categoryName"></el-table-column>

      <!-- 添加 -->
      <el-table-column label="进入按钮" >
        <template #default="{ row }">
          <el-button :icon="prompt" circle plain type="primary" @click="jump(row);findPeo(row)"></el-button>
        </template>
      </el-table-column>
      <!-- 添加 -->

      <el-table-column label="创建人编号" prop="createUser"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"> </el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="updateShow(row)"></el-button>
          <el-button :icon="Delete" circle plain type="danger" @click="deleteDormitory(row)"></el-button>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
      layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
      @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
  </el-card>

  <!-- 抽屉 -->
  <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
    <!-- 添加宿舍表单 -->
    <el-form :model="dormitoryModel" label-width="100px">
      <el-form-item label="宿舍编号">
        <el-input v-model="dormitoryModel.dormitoryId" placeholder="请输入宿舍编号"></el-input>
      </el-form-item>
      <!-- <el-form-item label="宿舍价格">
        <el-input v-model="dormitoryModel.dormitoryPrice" placeholder="请输入宿舍价格"></el-input>
      </el-form-item> -->
      <el-form-item label="宿舍分类">
        <el-select placeholder="请选择" v-model="dormitoryModel.categoryId">
          <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c.id">
          </el-option>
        </el-select>
      </el-form-item>


      <el-button type="primary" @click="title == '添加宿舍' ? addDormitory() : updateDormitory()">确定</el-button>
      <el-button type="info" @click="visibleDrawer = false">取消</el-button>
    </el-form>
  </el-drawer>

</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* 抽屉样式 */
.avatar-uploader {
  :deep() {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>